<template>
  <div>
    <el-card style="margin:20px 20px">
      <CategortSelet :disabled="showState !== 1" />
    </el-card>
    <el-card style="margin-top:20px 20px">
      <SpuList v-if="showState === 1" :set-show-state="setShowState" />
      <SpuForm v-if="showState === 2" :set-show-state="setShowState" />
      <SkuForm v-if="showState === 3" :set-show-state="setShowState" />
    </el-card>
  </div>
</template>

<script>
import CategortSelet from '@/components/CategorySelect/index.vue'
import SpuList from './SpuList/index.vue'
import SpuForm from './SpuForm/index.vue'
import SkuForm from './SkuForm/index.vue'

export default {
  name: 'Spu',
  components: {
    CategortSelet,
    SpuList,
    SpuForm,
    SkuForm
  },
  data() {
    return {
      showState: 1,
      spu: {
        categort3Id: '',
        description: '',
        tmId: '',
        spuName: '',
        spuImage: '',
        spuImageList: [],
        spuSaleAttrList: []
      }
    }
  },
  methods: {
    // 在spuList组件点击来显示不同的内容
    setShowState(num, row) {
      this.showState = num
      // 修改时不光传递了那个num数据 还多传递了一个spu对象
      // 添加时走进来没有传递row这个数据 所以是undefined
      if (row) {
        // 修改走进来的
        this.spu = row
      } else {
        // 不是修改走进来的
        // 防止用户点击修改 再点击取消 然后点击添加 要去清空数据
        this.spu = {
          categort3Id: '',
          description: '',
          tmId: '',
          spuName: '',
          spuImage: '',
          spuImageList: [],
          spuSaleAttrList: []
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
